import React from 'react'
import { Input, DatePicker, Space, Button, Row, Col } from 'antd'
import { SearchOutlined, ArrowUpOutlined } from '@ant-design/icons';
import List from '../../../components/afterLoan/List';
import imgUrl from '../../../static/up.png'
import { Link } from 'react-router-dom';
import Bread from '../../../components/Bread';


const { RangePicker } = DatePicker;

const columns = [
    {
        title: '变更号',
        dataIndex: 'change_id',
    },
    {
        title: '借款编号',
        dataIndex: 'borrow_num',
    },
    {
        title: '姓名',
        dataIndex: 'name',
    },
    {
        title: '借款期限',
        dataIndex: 'borrow_term',
    },
    {
        title: '还款方式',
        dataIndex: 'payment_method',
    },
    {
        title: '借款金额',
        dataIndex: 'loan_money'
    },
    {
        title: '借款利率',
        dataIndex: 'loan_rate',
        render: (text) => text + '%'
    },
    {
        title: '调整后利率',
        dataIndex: 'change_rate',
        key: 'change_rate',
        render: (text, record) => (
            <Space>
                {record.change_rate > record.loan_rate
                    ? <>{record.change_rate + '%'}<img src={imgUrl} style={{ marginBottom: 3 }}></img></>
                    : <>{record.change_rate + '%'}<img src={imgUrl} style={{ marginBottom: 3, transform: 'rotate(180deg)' }}></img></>}
            </Space>
        )
    },
    {
        title: '变更时间',
        dataIndex: 'change_time'
    },
    {
        title: '变更描述',
        dataIndex: 'change_description'
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space>
                <Link to={
                    {
                        pathname: "/home/afterloan/ratecheck",
                        name: record.name,
                        state: 1
                    }
                }>查看</Link>
            </Space>
        )
    }
];


const data = [];
for (let i = 0; i < 46; i++) {
    data.push({
        change_id: i,
        borrow_num: i,
        key: i,
        name: `Edward King ${i}`,
        borrow_term: 12,
        payment_method: '还款方式',
        loan_money: '50000',
        loan_rate: 13,
        change_rate: 14,
        change_time: '2021-12-29',
        change_description: '无'
    });
}

export default function Rate({ history }) {
    const Search = (
        <div className='after-search'>
            <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Input placeholder="姓名" />
                    </div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Input placeholder="借款编号" />
                    </div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Input placeholder="合同号" />
                    </div>
                </Col>
                <Col className="gutter-row" span={6}>
                    <div>
                        <Space direction="vertical" size={12}>
                            <RangePicker />
                        </Space>
                    </div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Button icon={<SearchOutlined />} type='button' >
                            查询
                        </Button>
                    </div>
                </Col>
            </Row>
        </div>
    )
    return (
        <div className='rate'>
            <Bread bread_title1="贷后管理" bread_title2="利率变更" />
            {Search}
            <List isAdd={true} columns={columns} data={data} addUrl="/home/afterloan/ratecheck" push={history.push} />
        </div>
    )
}
